<template>
  <div>
    <div style=" width: 600px; margin: 200px auto; padding: 20px 50px;" class="back">
      <img src="../assets/logo.png" style="margin-bottom: 60px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"
               style="font-weight: bold;width: 350px;margin: 0 auto">
        <el-form-item prop="username">
          <el-input class="input" v-model="ruleForm.username" style="width: 350px;" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input class="input" v-model="ruleForm.password" show-password placeholder="设置密码"
                    style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input class="input" v-model="ruleForm.confirmPassword" show-password placeholder="确认密码"
                    style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
                     style="background-color: #16d3d0;width: 350px;border: none">注册
          </el-button>
        </el-form-item>
        <el-form-item style="color: white">
          <span style="float: left"><el-radio v-model="termsOfService" @click="termsOfService=true">
            <el-button type="text" style="color: white;" center="true"
                       @click="centerDialogVisible = true">同意《千寻房产服务条款》</el-button>
          </el-radio></span>
          <span style="float: right">已有账号?现在就 <a href="/login"
                                                 style="color: #16d3d0;text-decoration: none">登录</a></span>
        </el-form-item>
      </el-form>

      <el-dialog
          title="网站服务条款"
          :visible.sync="centerDialogVisible"
          width="50%"
          center>
        <span style="font-size: 12px">
          尊敬的用户，欢迎您注册成为本网站用户。在注册前请您仔细阅读如下服务条款： 本网站（域名：www.uoko.com）为四川优客星空公寓管理有限公司（下简称优客）运营的网站本服务协议双方为优客与网站用户，本服务协议具有合同效力。 您确认本服务协议后，本服务协议即在您和本网站之间产生法律效力。请您务必在注册之前认真阅读全部服务协议内容，如有任何疑问，可向本网站咨询。 无论您事实上是否在注册之前认真阅读了本服务协议，只要您点击协议正本下方的"注册"按钮并按照本网站注册程序成功注册为用户，您的行为仍然表示您同意并签署了本服务协议。 您承诺接受并遵守本协议的约定。如果您不同意本协议的约定，您应立即停止注册程序或停止使用本网站服务。

1．本网站服务条款的确认和接纳
本网站各项服务的所有权和运作权归优客拥有。

2．用户必须：
(1)自行配备上网的所需设备， 包括个人电脑、调制解调器或其他必备上网装置。

(2)自行负担个人上网所支付的与此服务有关的电话费用、 网络费用。

3．用户在本网站交易平台上不得发布下列违法信息：
(1)反对宪法所确定的基本原则的；

(2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；

(3)损害国家荣誉和利益的；

(4)煽动民族仇恨、民族歧视，破坏民族团结的；

(5)破坏国家宗教政策，宣扬邪教和封建迷信的；

(6)散布谣言，扰乱社会秩序，破坏社会稳定的；

(7)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；

(8)侮辱或者诽谤他人，侵害他人合法权益的；

(9)含有法律、行政法规禁止的其他内容的。

4． 有关个人资料 用户同意：
(1) 提供及时、详尽及准确的个人资料。

(2)同意接收来自本网站的信息。

(3) 不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。

(4)优客不公开用户的姓名、地址、电子邮箱和笔名，以下情况除外：

  （a）用户授权优客透露这些信息。

  （b）相应的法律及程序要求优客提供用户的个人资料。如果用户提供的资料包含有不正确的信息，优客保留结束用户使用本网站信息服务资格的权利。

5． 用户在注册时应当选择稳定性及安全性相对较好的电子邮箱，并且同意接受并阅读优客发往用户的各类电子邮件。如用户未及时从自己的电子邮箱接受电子邮件或因用户电子邮箱或用户电子邮件接收及阅读程序本身的问题使电子邮件无法正常接收或阅读的，只要优客成功发送了电子邮件，应当视为用户已经接收到相关的电子邮件。电子邮件在发信服务器上所记录的发出时间视为送达时间。
6． 服务条款的修改
优客有权在必要时增加或修改服务条款，本网站服务条款一旦发生变动，将会在本网站页面上提示修改内容。变更后的条款一经在本网站公布后，立即自动生效。如果不同意所改动的内容，用户可以主动取消获得的本网站信息服务。如果用户继续享用本网站信息服务，则视为接受服务条款的变动。优客保留随时修改或中断本网站服务而不需通知用户的权利。优客行使修改或中断服务的权利，不需对用户或第三方负责。

7． 用户隐私制度
尊重用户个人隐私是优客的一项基本政策。所以，优客一定不会在未经合法用户授权时公开、编辑或透露其注册资料及保存在本网站中的非公开内容，除非有法律许可要求或优客在诚信的基础上认为透露这些信息在以下几种情况是必要的：

(1)、事先获得用户的明确授权；自行支付与此服务有关的费用；

(2)、遵守有关法律规定，遵从优客合法服务程序

(3)、按照相关政府主管部门的要求；

(4)、在紧急情况下，为维护用户及公众的权益；

(5)、为维护优客的合法权益；

(6)、其他需要公开、编辑或透露个人信息的情况。

(7)、保持维护优客的商标所有权。

本网站保留发布会员人口分析咨询的权利。

8．用户的账号、密码和安全性
您一旦注册成功成为用户，您将得到一个密码和账号。您应该保管好自己的帐号和密码安全，并对您的账号和密码的安全，以及对通过您的账户和密码实施的行为负责。您可随时根据指示改变您的密码，也可以结束旧的账号重开一个新账号。用户同意若发现任何非法使用用户账号或安全漏洞的情况，请立即通告本网站。

9． 拒绝提供担保
用户明确同意信息服务的使用由用户个人承担风险。 优客不担保服务不会受中断，对服务的及时性，安全性，出错发生都不作担保，但会在能力范围内，避免出错。

10．有限责任
优客对本网站任何直接、间接、偶然、特殊及继起的损害不负责任，这些损害来自：不正当使用本网站服务，或用户传送的信息不符合规定等。这些行为都有可能导致优客或本网站形象受损，所以本网站事先提出这种损害的可能性，同时会尽量避免这种损害的发生。

11．信息的储存及限制
优客有判定用户的行为是否符合本网站服务条款的要求和精神的权利，如果用户违背本网站服务条款的规定，优客有权终止向用户提供服务或注销该用户的账号。

12．用户管理
用户必须遵循：
在使用本网站过程中的所有行为均遵守国家法律、法规等规范性文件及本网站所发布的其他规则的规定和要求，不违背社会公共利益或公共道德，不损害他人的合法权益，不违反本协议及相关规则， 不干扰或混乱网络服务。

13．保障
其它人使用用户的电脑、账号和其它知识产权的追索费。
用户超出服务范围或违反服务条款给优客或第三人造成损害的，用户应赔偿经济损失包括但不限于诉讼费、保全费、交通费、律师费等。

14．结束服务
用户或优客可随时根据实际情况中断一项或多项服务。优客不需对任何个人或第三方负责而可以随时中断服务。用户若反对任何服务条款的建议或对后来的条款修改有异议，或对本网站服务不满，用户可以行使如下权利：

(1) 不再使用本网站信息服务。

(2) 通知优客停止对该用户账号的服务。

结束用户服务后，用户使用本网站服务的权利马上终止。从那时起，用户没有权利，本网站也没有义务传送任何未处理的信息或未完成的服务给用户或第三方。

15．通告
所有发给用户的通告都可通过重要页面的公告或电子邮件或常规的信件传送。服务条款的修改、服务变更、或其它重要事件的通告都会以此形式进行。

16．信息内容的所有权
本网站定义的信息内容包括：文字、软件、声音、相片、录像、图表；在广告中全部内容；本网站为用户提供的其它信息。所有这些内容受版权、商标、标签和其它财产所有权法律或知识产权相关法律的保护。所以，用户只能在优客和广告商授权下才能使用这些内容，而不能擅自复制、再造这些内容、或创造与内容有关的派生产品。

17．法律
本网站信息服务条款要与中华人民共和国的法律解释一致。用户和优客一致同意服从优客所在地有管辖权的法院管辖。如发生本网站服务条款与中华人民共和国法律相抵触时，则这些条款将完全按法律规定重新解释，同时这些条款则依旧保持对用户的约束力。
        </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      termsOfService: false,
      // 表单
      ruleForm: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      // 表单规则
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]

      }
    };
  },
  methods: {

    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.confirmPassword != this.ruleForm.password) {
            this.$message({
              message: '密码不一致！',
              type: 'success'
            });
            return;
          }
          if (valid) {
            console.log('表单验证成功，提交数据:', this.form);
          } else {
            console.log('表单验证失败');
          }
          if (this.termsOfService == false) {
            this.$message({
              message: '请先同意服务条款！',
              type: 'success'
            });
            return;
          }
          let url = 'http://localhost:9200/user/add-new';
          console.log('url = ' + url);

          let formData = this.qs.stringify(this.ruleForm);

          console.log("formData=" + formData)
          this.axios.post(url, formData).then((response) => {
            let jsonResult = response.data;
            console.log(jsonResult, 'jsonResult');
            if (jsonResult.state == 20000) {
              this.$message({
                message: '注册成功',
                type: 'success'
              });
              let jwt = jsonResult.data;
              localStorage.setItem("localJwt", jwt);
              //跳转
              this.$router.push('/login');
            } else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style>
body {
  background-image: url("../assets/regiBg.jpg");

}

.input {
  border: none;
}
</style>